body {
          font-family: Arial, sans-serif;
          padding: 0;
          background: linear-gradient(135deg, #1a73e8, #0f4c81, #1c3d5a);
          color: white;
        }

        .container {
          max-width: 600px;
          margin: 40px auto;
          padding: 25px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        h1 {
          text-align: center;
          margin-bottom: 20px;
          color: #ffffff;
          font-size: 2rem;
        }

        label {
          display: block;
          margin: 15px 0 5px;
          font-weight: bold;
          color: #dce9f9;
        }

        input,
        textarea,
        select {
          width: 100%;
          padding: 12px;
          border: none;
          border-radius: 8px;
          outline: none;
          margin-bottom: 15px;
          font-size: 1rem;
        }


        .hidden {
          display: none;
        }

        button {
          width: 100%;
          padding: 14px;
          border: none;
          border-radius: 10px;
          background: #0f9dff;
          color: white;
          font-size: 1.1rem;
          font-weight: bold;
          cursor: pointer;
          transition: 0.3s ease;
        }

        button:hover {
          background: #0077cc;
        }

        .note {
          text-align: center;
          font-size: 0.9rem;
          margin-top: 10px;
          color: #cce4ff;
        }

        /* ============================= */
        /* 📱 Responsive Design Fixes    */
        /* ============================= */

        /* Tablets */
        @media (max-width: 1024px) {
          .container {
            max-width: 90%;
            padding: 20px;
          }

          h1 {
            font-size: 1.8rem;
          }

          input,
          textarea,
          select {
            font-size: 1rem;
          }
        }

        /* Mobile (landscape & portrait) */
        @media (max-width: 768px) {

          .container {
            max-width: 95%;
            padding: 18px;
          }

          h1 {
            font-size: 1.5rem;
          }

          label {
            font-size: 0.95rem;
          }

          input,
          textarea,
          select {
            font-size: 0.95rem;
            padding: 10px;
          }

          button {
            font-size: 1rem;
            padding: 12px;
          }
        }

        /* Extra small screens (phones under 480px) */
        @media (max-width: 480px) {

          .container {
            max-width: 100%;
            margin: 20px auto;
            padding: 15px;
            border-radius: 10px;
          }

          h1 {
            font-size: 1.3rem;
          }

          label {
            font-size: 0.9rem;
          }

          input,
          textarea,
          select {
            font-size: 0.9rem;
            padding: 8px;
          }

          button {
            font-size: 0.95rem;
            padding: 10px;
          }

          .note {
            font-size: 0.8rem;
          }
        }






        .contact-links {
          text-align: center;
          padding: 60px 20px;
          background: #f9f9f9;
          border-radius: 20px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
          margin: 50px auto;
          max-width: 700px;
        }

        .contact-links h2 {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 10px;
          color: #222;
        }

        .contact-links p {
          font-size: 16px;
          color: #555;
          margin-bottom: 30px;
        }

        .social-icons {
          display: flex;
          justify-content: center;
          gap: 30px;
          flex-wrap: wrap;
        }

        .social-icons a {
          width: 120px;
          height: 120px;
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          text-decoration: none;
          color: #fff;
          font-weight: 600;
          transition: 0.3s ease;
        }

        .social-icons i {
          font-size: 42px;
          margin-bottom: 8px;
        }

        .telegram {
          background: #0088cc;
        }

        .whatsapp {
          background: #25d366;
        }

        .discord {
          background: #5865f2;
        }

        .social-icons a:hover {
          transform: translateY(-6px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
          opacity: 0.9;
        }